<template>
	<view class="Global">
		<!-- <image class="imagepage" src="/static/background@2x.png" mode=""></image> -->
		<bgImage></bgImage>
		<MyNav :title="title" bgColor="" :backIcon="isback"></MyNav>



		<view class="contentCenter">


			<view class="listContent" v-for="(item,index) in listData">



        <view class="contentItem" v-if="item.type==0">
          <view class="contentItemTextLeftContent">
            <text class="contentItemTextLeft">{{item.title}}</text>
          </view>
          <text class="contentItemTextRight">{{item.Value}}</text>
        </view>


				<view class="contentItem" v-if="item.type==1">
					<view class="contentItemTextLeftContent">
						<text class="contentItemTextLeft">{{item.title}}</text>
						<text class="contentItemTextLeftStart">*</text>
					</view>
					<input class="contentItemTextRight" @input="onInputAccount(index,$event)" type="text" :value="item.Value" />
				</view>


        <view class="contentItem" v-if="item.type==2">
          <view class="contentItemTextLeftContent">
            <text class="contentItemTextLeft">{{item.title}}</text>
            <text class="contentItemTextLeftStart">*</text>
          </view>
          <input class="contentItemTextRight" @click="updateData()" disabled="true" type="text" :value="item.Value"  />
<!--          <picker mode="multiSelector" :range="multiItems" @change="onMultiPickerChange" @columnchange="onColumnChange">-->
<!--            <view class="picker">-->
<!--              {{selectedMultiItems.join(', ')}}-->
<!--            </view>-->
<!--          </picker>-->
          <image class="contentItemRightContentImg" @click="updateData()"
                 src="/static/gongzuotai/xia_jiantou@2x.png" mode="">
          </image>
        </view>

				<view class="lineBg"></view>
			</view>



			<checkbox-group class="contentSizeTopCheckbox" name="contentSizeTopCheck">
				<label>
					<checkbox style="transform:scale(0.7)" value="" /><text class="contentSizeTopText1">批号录入</text>
				</label>

			</checkbox-group>





		</view>


		<view class="loginContent">

				<button @click="createOrder()" style="color:#ffffff" class="login" type="default">{{login}}</button>
			</view>


	</view>
</template>

<script>
	import MyNav from '@/components/customnavbar.vue'
	import bgImage from '@/components/backgroundImage.vue'
  import {getOrderAndSplittInfo,addOrderRegister, getOrderProcessList} from "@/pages/api/api";

	export default {
		components: {
			MyNav,
			bgImage
		},
		data() {
			return {
				login: '确定入菲',

				title: '扫码入菲',

				isback: true,

				listData: [
          {
            title: '工号',
            Value: '',
            type: 1
          },
          {
            title: '订单号',
            Value: '',
            type: 0
          },
          {
            title: '款式',
            Value: '',
            type: 0
          },
          {
            title: '颜色',
            Value: '',
            type: 0
          },
          {
            title: '尺码',
            Value: '',
            type: 0
          },
          {
            title: '扎号',
            Value: '',
            type: 0
          },
            {
						title: '工序',
						Value: '',
						type: 2
					},
					{
						title: '数量',
						Value: '0',
						type: 1
					},

				],
        orderId:'',
        styleId:'',
        orderData:{},
        processData: [],
        processDataNames: '',
        processDataIds: [],
        storeId: '',
        tenantId: '',
        userInfo: {},
			}
		},
    onShow() {
      var that = this
      uni.$on('globleProcessEvent', function(res) {
        // console.log('3422222', res.listSizeData) //  为 B 页面传过来的值
        that.processData = res.listData
        console.log('选择工序返回数据', that.processData) //  为 B 页面传过来的值
        let names = []
        let processDataIds = []
        that.processData.forEach(item=>{
          names.push(item.processName)
          processDataIds.push(item.id);
        })
        that.processDataIds = processDataIds.join(",")
        that.listData.forEach(item=>{
          if(item.title=='工序'){
            item.Value = names.join(",")
          }
        })
        // 移除监听事件
        uni.$off('globleProcessEvent');
      })
    },
    onLoad: function (option) {
      console.log('option',option)
      let code = JSON.parse(decodeURIComponent(option.code));
      this.id = code;
      const app = getApp();
      this.storeId = app.globalData.storeId
      this.tenantId = app.globalData.tenantId
      this.userInfo = uni.getStorageSync('userInfo')
      this.listData.forEach(item=>{
          if(item.title=='工号'){
            item.Value = this.userInfo.userName+' '+this.userInfo.nickName
          }
      })
      this.getOrderAndSplittInfo(code)
    },
		methods: {
      // 获取编号输入框的值
      onInputAccount(index,e) {
        this.listData[index].Value=e.target.value
      },
      getOrderAndSplittInfo(code){
        getOrderAndSplittInfo(code).then(res=>{
          if(res.code ==200){
            let data = res.data;
            this.orderData = data
            this.orderId = data.orderId
            this.styleId = data.styleId
            this.listData.forEach(item=>{
              if(item.title=='订单号'){
                item.Value = data.orderCode
              }
              if(item.title=='款式'){
                item.Value = data.styleName
              }
              if(item.title=='颜色'){
                item.Value = data.colors
              }
              if(item.title=='尺码'){
                item.Value = data.sizes
              }
              if(item.title=='扎号'){
                item.Value = data.bundleCode
              }
            })
          }
        })
      },
      getOrderProcessList(oderId){
        getOrderProcessList({orderId:oderId}).then(res=>{
          if(res.code==200){
            this.multiItems = res.data;
          }
        })
      },
      //确定入菲
      createOrder() {
        let data = {
          userId: this.userInfo.userId,
          orderId: this.orderId,
          styleId: this.styleId,
          splittUpId: this.orderData.id,
          bundleCode: this.orderData.bundleCode,
          quantity: 0,
          processIds: this.processDataIds,
          storeId: this.storeId,
          tenatnId: this.tenantId,
        }
        this.listData.forEach(item=>{
          if(item.title=='数量'){
            data.quantity = item.Value
          }
        })
        addOrderRegister(data).then(res=>{
          if(res.code == 200){
            let data =  res.data
            // 显示提示信息
            uni.showToast({
              title: res.msg,
              icon: 'none'
            });
            uni.navigateTo({
              url: '/subPack/workInThePhilippines/reportWorkResult/reportWorkResult?data='+encodeURIComponent(JSON.stringify(data)),
              success: res => {
              },
              fail: () => {
              },
              complete: () => {
              }
            });
          }
        })


      },
      onMultiPickerChange(e) {
        this.selectedMultiItems = e.detail.value; // 更新选中项的索引数组
      },
      onColumnChange(e) {
        // 处理列变化，例如当用户改变某一列的选择时，可能需要更新其他列的可选值等逻辑
      },
      // 选择工序
      updateData() {
        console.log('updateData')
        let parmas = {
          storeId: this.storeId,
          tenantId: this.tenantId,
          orderId: this.orderId,
          selectList: []
        }
        uni.navigateTo({
          url: '/subPack/workInThePhilippines/workInThePhilippines/orderProcessSelect/orderProcessSelect?data=' +
              encodeURIComponent(JSON.stringify(parmas)),
          success: res => {
          },
          fail: () => {
          },
          complete: () => {
          }
        });
      },
		}
	}
</script>

<style>


	.imagepage {

		background-size: cover;
		background-repeat: no-repeat;
		background-position: center center;
		position: absolute;
		z-index: -1;
		left: 0;
		right: 0;
		bottom: 0;
		right: 0;
		width: 100%;
		height: 100%;

	}


	.loginContent {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 750rpx;

			margin-top: 30rpx;
	}

	.login {
		display: flex;
		justify-content: center;
		margin-top: 20rpx;
		width: 690rpx;
		height: 100rpx;

		border-radius: 30rpx;
		font-weight: 400;
		font-size: 36rpx;
		color: #FFFFFF;
		text-align: center;
		font-weight: bold;


		background: linear-gradient(90deg, #45A8FF, #0AE1C6);

	}


	.contentSizeTopTextRight {
		font-family: HarmonyOS Sans SC;
		font-weight: bold;
		font-size: 24rpx;
		color: #333333;

		margin-right: 30rpx;
	}


	.contentSizeTopText1 {

		font-family: HarmonyOS Sans SC;
		font-weight: bold;
		font-size: 24rpx;
		color: #333333;
	}
	.contentSizeTopCheckbox {

		display: flex;
		justify-content: left;
		align-items: center;

		margin-top: 10rpx;
		width: 100%;
		height: 120rpx;


	}

	.checkBoxInner{

		display: flex;
		flex-direction: row;
		justify-content: left;
		align-items: center;
		width: 100%;
	}

	.checkBoxContent{
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: row;

		background:red;
		width: 100%;
	}
	.zhaHaoText {
		display: flex;
		justify-content: left;
		align-items: center;
		height: 120rpx;
		margin-left: 10rpx;

		font-family: HarmonyOS Sans SC;
		font-weight: 600;
		font-size: 24rpx;
		color: #666666;
		line-height: 120rpx;
	}

	.lineBg {
		width: 100%;
		height: 1rpx;
		background: #F9FCFF;



	}

	.contentItemTextRight {
		font-size: 28rpx;
		font-weight: 600;
		color: #666666;
		margin-right: 30rpx;
		width: 200rpx;
		text-align: right;
	}

	.contentItemTextLeftStart {
		color: red;




	}

	.contentItemTextLeft {
		font-size: 28rpx;
		font-weight: 600;
		color: black;
		margin-left: 30rpx;
	}

	.contentItem {

		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-direction: row;

		width: 690rpx;
		height: 120rpx;




	}


	.listContent {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 750rpx;
	}


	.contentCenter {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

		width: 690rpx;
		height: 1090rpx;
		background: #FFFFFF;

		border-radius: 30rpx;

		margin-top: 30rpx;
	}

  .contentItemRightContentImg {
    width: 20rpx;
    height: 10rpx;
    margin-left: 15rpx;
    margin-right: 15rpx;

  }
</style>
